{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Python安装与运行方式</title>
<style>
		html, body {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		.div-a{ float:left;width:50%;height:100%;border:1px solid #F00;overflow-y:scroll}
		.div-b{ float:right;width:49%;height:100%;border:0px solid #000}


        div#butt	{
            height:50px;
            border-bottom: 0px solid #c5c5c5;
            background:#fff;
            }

        div#butt input {
            margin:10px 0 0 10px;
            background:blueviolet;
            color:#fff;
            width:150px;
            height:30px;
            font:14px Verdana, Arial, Helvetica, sans-serif;
            }

        form{

            height:45%;
            width:100%;
            margin-left:0px;
			border:0px solid #c5c5c5;
            }
		#CodeArea{
			height:100%;
            width:100%;
            margin-left:0px;
		}
        #TestCode{
            height:85%;
			width:99%;
            overflow:auto;
            border:1px solid #c5c5c5;
            font:14px "Courier New", Courier, monospace;
            }
        #CodeArea h2	{
            margin:10px 0 6px 5px;
            color:brown;
            font-size:14px;
            }

        #result	{
            height:48%;
            width:100%;
			margin-left:0px;
			border:0px solid red;
            }
		#output{
            width:99%;
            height:85%;
            overflow:auto;
            border:1px solid #c5c5c5;
            font:14px "Courier New", Courier, monospace;
            }

        #result h2	{
            margin:10px 0 6px 5px;
            color:brown;
            font-size:14px;
            }

</style>
<script src="{% static "common/jquery-1.8.2.js" %}" type="text/javascript"></script>
</head>
<body>
<div class="div-a">
    <li data-role="list-divider" data-theme="b">Python安装与运行方式</li>
  <div id="" class="ui-body ui-body-a">
    <h4>Python版本</h4>
    <p>
        目前，Python有两个版本，一个是2.x版，一个是3.x版，这两个版本是不兼容的，因为现在Python正在朝着3.x版本进化，在进化过程中，大量的针对2.x版本的代码要修改后才能运行，所以，目前有许多第三方库还暂时无法在3.x上使用。因此，为了保证能方便的使用第三方库，本教程以2.x版为基础。
    </p>
    <h3>安装</h3>
    <h4>Mac安装</h4>
    <p>
        OS X 10.8或者以上的Macs系统都自带有Python环境，因此无需手动安装。
    </p>
    <h4>Linux安装</h4>
    <p>
        1、从Python的官方网站http://www.python.org/download/下载并解压适用于Unix/Linux的源码压缩包。<br/>
        2、如果你需要自定义一些选项修改Modules/Setup<br/>
        3、执行 ./configure 脚本<br/>
        4、make<br/>
        5、make install<br/>
        执行以上操作后，Python将会安装在 /usr/local/bin 目录中。<br/>
    <b>配置环境变量：</b><br/>
        1、	在 csh shell:<br/>
        输入 setenv PATH "$PATH:/usr/local/bin/python", 按下"Enter"。<br/>
        2、	在 bash shell (Linux):<br/>
        输入 export PATH="$PATH:/usr/local/bin/python" ，按下"Enter"。<br/>
        3、	在 sh 或者 ksh shell:<br/>
        输入 PATH="$PATH:/usr/local/bin/python" , 按下"Enter"。<br/>
        这样,环境变量就配好了,注意/usr/local/bin/python是Python的安装目录。
    </p>
    <h4>Windows</h4>
    <p>
        1从Python的官方网站http://www.python.org/download/下载需要的Python版本。<br/>

        2运行安装包。注意选择安装组件时，全部勾选，然后一路next即可安装成功。特别是pip和Add python.exe to Path。<br/>
        <img src="{% static "python/image/path.png" %}" alt="path"/>
        3打开命令提示符窗口，敲入Python，出现如下所示的画面，则证明Python安装成功。<br/>
        <img src="{% static "python/image/installOk.png" %}" alt="ok"/>
        <b>如果出现下图，则证明Python的环境变量没有配置好，这是可以选择重新安装Python，记得一定要勾选Add python.exe to Path，或者手动配置环境变量。</b><br/>
        <img src="{% static "python/image/installError.png" %}" alt="error"/>
        <b>配置环境变量步骤：</b>
        1、	右击计算机选择属性，然后进入‘高级系统设置’。<br/>
        <img src="{% static "python/image/path1.png" %}" alt="path1"/>
        2、	进入‘系统变量’双击‘path’。
        <img src="{% static "python/image/path2.png" %}" alt="path2"/>
        <img src="{% static "python/image/path3.png" %}" alt="path3"/>
        3、	在最后加上Python的安装路径，注意与前一路径用;隔开。<br/>
        <img src="{% static "python/image/path4.png" %}" alt="path4"/>
        4、	设置成功，打开命令提示符窗口，再次输入python验证。<br/>
    </p>
    <h3>运行方式</h3>
      可以通过三种方式运行python：<br/>
        <b>1交互式解释器</b><br/>
        可以直接通过命令行进入python并在交互式解释器中开始编写Python代码。<br/>
        <b>2命令行脚本</b><br/>
        在你的应用程序中通过引入解释器可以在命令行中执行Python脚本。<br/>
        <b>3集成开发环境</b><br/>
        集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套，可以帮助开发者更高效迅速的编写代码。
        比较常用的Python IDE 有PyCharm、Sublime Text、Eclipse with PyDev等，大家可以根据自己的喜好进行选择。<br/>

  </div>
</div>
<div class="div-b">
	<form action="#" method="post" id="tryitform" name="tryitform" onSubmit="validateForm();" target="i" id="form-a">
		<div id="CodeArea">
		<h2>编辑您的代码：</h2>
		<textarea id="TestCode" wrap="logical">
#!/usr/bin/python
# -*- coding: utf-8 -*-
print "hello world!"
		</textarea>
		</div>
		<input type="hidden" id="code" name="code"  />

	</form>
<div id="butt">
		<input type="button" value="提交代码" onClick="submitTryit()" id="submit">
		</div>
	<div id="result">
		<h2>查看结果:</h2>
		<textarea id="output" wrap="logical"></textarea>
	</div>
</div>
<script type="text/javascript">
	function submitTryit()
	{

	    var t=document.getElementById("TestCode").value;

	    document.getElementById("code").value=t;

	    validateForm();
        $.ajax({
         type:"GET",
         url:"/moon/codeHandler",
         data:{"code":t},
         success:function(ret){
            $('#output').html(ret.result)
            }
        })

	}

	function validateForm()
	{
	var code=document.getElementById("code").value;
	if (code.length>5000)
		{
		document.getElementById("code").value="<h1>Error</h1>";
		}
	}
</script>
</body>
</html>
